<template>
  <div class="footer">
  		<div class="menu" :class="{'active': activeIndex == 0}" @click="exchangeStatus('/index')">
				<div class="iconfont icon-unhome menu-icon"></div>
				<div class="menu-text">首页 </div>
			</div>
  		<div class="menu" :class="{'active': activeIndex == 1}" @click="exchangeStatus('/workManagement')">
				<div class="iconfont icon-gongzuoguanli menu-icon"></div>
				<div class="menu-text">工作管理</div>
			</div>
  		<div class="menu" :class="{'active': activeIndex == 2}" @click="exchangeStatus('/runThePartyStrictly')">
				<div class="iconfont icon-congyanzhidang menu-icon"></div>
				<div class="menu-text">从严治党</div>
			</div>
  		<div class="menu" :class="{'active': activeIndex == 3}" @click="exchangeStatus('/mine')">
				<div class="iconfont icon-my-action menu-icon"></div>
				<div class="menu-text">我的</div>
			</div>
	</div>
</template>
<script>
import init from '../../assets/js/init.js';
export default {
  name: 'footer',
  props: ['activeIndex'],
  data: function(){
  		return {
  		
  		}
  },
  methods:{
  	exchangeStatus:function(address){
  		this.$router.push(address);
  	},
  }
}



</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.footer{
		width: 100%;
		height: 2.5rem;
		overflow: hidden;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e9e9e9;
	}
	.menu{
		width: 25%;
		float: left;
		font-size: 0.8rem;
		margin-top: 0.25rem;
		color: #666;
	}
	.active{
		color: #f00;
	}
	.menu div{
		text-align: center;
	}
	.menu-icon{
		font-size: 1rem;
	}
	.menu-text{
		font-size: 0.6rem;
	}

</style>
